<template>
  <div>
    <el-row class="header_row">
       <el-tooltip class="item" effect="dark" content="返回" placement="top">
      <div class="course-back-btn">
        <router-link to="/course/show" class="route-link">
        <i class="el-icon-back"></i></router-link>
      </div>
       </el-tooltip>
        

        <div class="course-header">
          <div style="margin-top:-0.5%">
            <!-- <el-tag type="success">课程名：{{this.$route.params.courseInfo.courseName}}</el-tag> -->
            <!-- <el-tag type="success">xxxx</el-tag> -->
          </div>
        </div>
    </el-row>

    <div class="courseinfo-div">

         <el-menu :default-active="active.index" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="stu"><i class="el-icon-user"></i>学生管理</el-menu-item>
            <el-menu-item index="work"><i class="el-icon-notebook-1"></i>课程作业 </el-menu-item>
            <el-menu-item index="learn"> <i class="el-icon-pie-chart"></i>学情分析 </el-menu-item>
            <el-menu-item index="notice"><i class="el-icon-postcard"></i>发布公告</el-menu-item>
            <el-menu-item index="info"><i class="el-icon-reading"></i>修改课程信息</el-menu-item>
         </el-menu>


         <div>

            <course-stu v-if="showInfo.stuIsShow" :courseId="courseId"></course-stu>
            <course-learning-condition  v-if="showInfo.learnConditionIsShow" :courseId="courseId"></course-learning-condition>
            <course-notice v-if="showInfo.noticeIsShow" :courseId="courseId"></course-notice>
            <course-work v-if="showInfo.workIsShow" :courseId="courseId"></course-work>
            <course-update-info v-if="showInfo.infoIsShow" :courseId="courseId"></course-update-info>
            
         </div>

    </div>
  </div>
</template>

<script>
import {Storage} from '../../storage'

import CourseStu from '../../components/course/CourseStu'
import CourseLearningCondition from '../../components/course/CourseLearningCondition'
import CourseNotice from '../../components/course/CourseNotice.vue'
import CourseWork from '../../components/course/CourseWork.vue'
import CourseUpdateInfo from '../../components/course/CourseUpdateInfo.vue'

export default {
  components: {
    CourseStu, CourseLearningCondition, CourseNotice,
    CourseWork,
    CourseUpdateInfo
  },
  data() {
    return {
      // courseInfo: this.$route.params.courseInfo
      // imgUrl: require('../../../public/img/course/course2.png'),
      active:{
        courseId:'',
        index:'stu'
      },
      showInfo:{
        stuIsShow:false,
        learnConditionIsShow:false,
        noticeIsShow:false,
        workIsShow:false,
        infoIsShow:false,
      },
      courseId:'',
    }
  },
  methods: {
    handleSelect(key, keyPath) {
        this.active.courseId = this.courseId
        switch(keyPath[0]) {
          case 'stu':
            this.active.index = 'stu'
            this.showInfo.stuIsShow = true
            this.showInfo.learnConditionIsShow = false
            this.showInfo.noticeIsShow = false
            this.showInfo.workIsShow = false
            this.showInfo.infoIsShow = false
            break;
          case 'learn':
            this.active.index = 'learn'
            this.showInfo.stuIsShow = false
            this.showInfo.learnConditionIsShow = true
            this.showInfo.noticeIsShow = false
            this.showInfo.workIsShow = false
            this.showInfo.infoIsShow = false
            break;
          case 'notice':
            this.active.index = 'notice'
            this.showInfo.stuIsShow = false
            this.showInfo.learnConditionIsShow = false
            this.showInfo.workIsShow = false
            this.showInfo.noticeIsShow = true
            this.showInfo.infoIsShow = false
            break;
          case 'work':
            this.active.index = 'work'
            this.showInfo.stuIsShow = false
            this.showInfo.learnConditionIsShow = false
            this.showInfo.workIsShow = true
            this.showInfo.noticeIsShow = false 
            this.showInfo.infoIsShow = false
            break;
          case 'info':
            this.active.index = 'info'
            this.showInfo.stuIsShow = false
            this.showInfo.learnConditionIsShow = false
            this.showInfo.workIsShow = false
            this.showInfo.noticeIsShow = false 
            this.showInfo.infoIsShow = true
        }

        Storage.set("cousreinfo-active", this.active, 15 * 60 * 1000)
    }
  },
  mounted() {
    let courseId = Storage.get("courseId")
    if(courseId == null || courseId == '') {
        this.$router.push( {
            path: "/course/show"
        })
    }else {
      this.courseId = courseId
      this.showInfo.stuIsShow = true
    }

    let active = Storage.get("cousreinfo-active")
    if(active != undefined) {
      if(active.courseId == this.courseId) {
        this.active = active
        this.handleSelect(null, [this.active.index])
      }
    }
    
  },
}
</script>

<style>
.course-back-btn {
  z-index: 99;
  right: 0.5%;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 50%;
  /* background-color: tomato; */
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 13%);
  /* position: absolute; */
  position: fixed;
}

.course-header {
  width: 100%;
  display: flex;
  justify-content: flex-end;

}

.courseinfo-div {
  margin: 2%;
}

.courseinfo-desc {
  display: flex;
  justify-content: space-around;
}

.courseinfo-img {
  width: 270px;
  height: 150px;
}

.courseinfo-detail {
  margin-top: 2%;
}

</style>